<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  <style>
    .rate {
      display: flex;
      line-height: 30px;
      align-items: center;
      font-size: 14px;
    }

    .rate>span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url("./imgs/score.png") center center / 16px 16px;
    }

    .rate>span.on {
      background: url("./imgs/score-on.png") center center / 16px 16px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>

    <select :selected="level" @change="level=$event.target.value">
      <option value="001" :selected="level == 001">AAA</option>
      <option value="002" :selected="level == 002">BBB</option>
      <option value="003" :selected="level == 003">CCC</option>
    </select>

    <hr>


    <!-- <select @change="level=$event.target.value">
      <option :selected="level == '001'" value="001">AAA</option>
      <option :selected="level == '002'" value="002">BBB</option>
      <option :selected="level == '003'" value="003">CCC</option>
    </select> -->


    <hr>

    <!-- <select v-model="level">
      <option value="001">AAA</option>
      <option value="002">BBB</option>
      <option value="003">CCC</option>
    </select> -->

    <hr>

    <input type="checkbox" value="001" v-model="hobbiey"> 打代码
    <input type="checkbox" value="002" v-model="hobbiey"> 打游戏
    <input type="checkbox" value="003" v-model="hobbiey"> 睡觉

    <hr>

    <input type="radio" :value="0" v-model="gender"> 男
    <input type="radio" :value="1" v-model="gender"> 女

    <hr>

    <input type="radio" :value="0" @change="gender=$event.target.value" :checked="gender==0"> 男
    <input type="radio" :value="1" @change="gender=$event.target.value" :checked="gender==1"> 女

    <hr>

    <input type="text" v-model="name">
    <input type="text" :value="name" @input="name=$event.target.value">

    <hr>

    <ml-rate :value="num" @input="num=$event">配送速度：</ml-rate>
    <ml-rate :value="num1" @input="num1=$event">服务态度：</ml-rate>
    <ml-rate :value="num2" @input="num2 = $event">用户体验：</ml-rate>

    <hr>

    <ml-rate v-model.number="num">配送速度：</ml-rate>
    <ml-rate v-model.number="num1">服务态度：</ml-rate>
    <ml-rate v-model.number="num2">用户体验：</ml-rate>
  </div>

  <script type="x-template" id="rate">
    <div class="rate">
      <slot name="default"></slot>
      <span @click="$emit('input',i)" v-for="i in 5" :class="{on:value>=i}"></span>
    </div>
  </script>

  <script>

    let rate = {
      template: "#rate",
      props: {
        value: { type: Number, default: 0 }
      }
    }

    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          num: 1,
          num1: 2,
          num2: 3,
          gender: "0",
          hobbiey: ['001'],
          level: "002"
        }
      },
      components: {
        "ml-rate": rate
      }
    });
  </script>
</body>

</html>